import React from "react";
import axios from "axios";
import "./register.css";
import { useNavigate } from "react-router-dom";
import { Form, Input, Button } from "antd";

const Register = () => {
  const navite = useNavigate();
  const [form] = Form.useForm();
  // const [isFilled, setIsFilled] = useState(false);

  // 函数用于检查表单项是否都已填写
  // const checkForm = () => {
  //   form.validateFields()
  //     .then(() => {
  //       setIsFilled(true);
  //     })
  //     .catch(() => {
  //       setIsFilled(false);
  //     });
  // };
  // const check_register = () =>{
  //   if(ok){
  //     handleRegister
  //   }else{
  //     //提示错误
  //   }
  // }
  const handleRegister = () => {
    // console.log(identify.current.value,userName.current.value)
    axios.post("http://192.168.61.84:8086/v1/user/register",
      {
        user_name: form.getFieldsValue().user_name,
        name: form.getFieldsValue().realname,
        mobile: form.getFieldsValue().mobile,
        password: form.getFieldsValue().password,
        eq_password: form.getFieldsValue().eq_password,
        identify: form.getFieldsValue().identify,
        roleid: 2
      }).then(res => {
        console.log(res);
        navite("/login");
      })
  };

  const redirectToLogin = () => {
    navite("/login");
  };

  return (
    <div className="container">
      <div className="register-wrapper">
        <div className="header"> 欢 迎 注 册</div>
        <Form form={form}>
          <div className="form-wrapper">
            <Form.Item
              label="用 户 名"
              name="user_name"
              rules={[
                {
                  required: true,
                  message: "用户名不能为空",
                },
                {
                  min: 2,
                  max: 6,
                  message: "用户名长度必须在2到6位之间",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="手 机 号"
              name="mobile"
              rules={[
                {
                  required: true,
                  message: "手机号不能为空",
                }, {
                  pattern: /^\d{11}$/,
                  message: "请输入正确的手机号",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: "密码不能为空",
                },
                // {
                //   min:6,
                //   max: 10,
                //   message: "密码长度必须在6到10位之间",
                // },
                {
                  validator: (_, value) =>
                    value && !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,10}$/.test(value)
                      ? Promise.reject(
                          new Error('密码长度必须在6到10个字符之间,并且包含至少一个字母和一个数字')
                        )
                      : Promise.resolve()                  
                },
              ]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item
              label="确认密码"
              name="eq_password"
              dependencies={['password']} // This line ensures that validation triggers when 'password' field changes
              rules={[
                {
                  required: true,
                  message: '密码不能为空',
                },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('password') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('两次输入的密码不一致!'));
                  },
                }),
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              label="真实姓名"
              name="realname"
              rules={[
                {
                  required: true,
                  message: "真实姓名不能为空",
                },
                {
                  pattern: /^[^\d]+$/,
                  message: "请输入您的真实姓名",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="身份证号码"
              name="identify"
              rules={[
                {
                  required: true,
                  message: "身份证号码不能为空",
                },
                {
                  pattern: /^\d{18}$/,
                  message: "请输入正确的身份证号码",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <div className="btn">
              <Button
                type="primary"
                htmlType="submit"
                onClick={handleRegister}
              >
                注册
              </Button>
            </div>
          </div>
        </Form>
        <div className="msg">
          已有账户?
          <a href="/login" onClick={redirectToLogin}>点 击 登 录</a>
        </div>
      </div>
    </div>
  );
};

export default Register;
